<style scoped>
</style>
<template>
	<div>
		<Form ref="formData" :model="formData" :rules="ruleInline" :label-width="100">
			<FormItem prop="dbSysname" label="数据库系统名称">
				<Input type="text" v-model="formData.dbSysname" placeholder="数据库系统名称" />
			</FormItem>
			<FormItem prop="dbIp" label="地址">
				<Input type="text" v-model="formData.dbIp" placeholder="192.168.0.106" />
			</FormItem>
			<FormItem prop="dbPort" label="端口">
				<Input type="text" v-model="formData.dbPort" placeholder="1521" />
			</FormItem>
			<FormItem label="类型">
				<Select v-model="formData.dbType">
					<Option value="oracle">Oracle</Option>
					<Option value="mysql">Mysql</Option>
					<Option value="mssql">SqlServer</Option>
				</Select>
			</FormItem>
			<FormItem prop="dbName" label="库名">
				<Input type="text" v-model="formData.dbName" placeholder="TMS_DEV" />
			</FormItem>

			<FormItem prop="dbSchema" label="数据库模式">
				<Input type="text" v-model="formData.dbSchema" placeholder="mysql,oracle不能为空" />
			</FormItem>
			
			<FormItem prop="username" label="用户名">
				<Input type="text" v-model="formData.username" placeholder="hkuser" />
			</FormItem>
			<FormItem prop="password" label="密码">
				<Input type="password" v-model="formData.password" placeholder="xxx" />
			</FormItem>
			<FormItem>
				<Button type="info" @click="testDBConnect('formData')" :style="{marginRight:'5px'}">测试连接</Button>
				<Button v-if="this.dbTestFlag" type="success" @click="handleSubmit('formData')">保存</Button>
			</FormItem>
		</Form>
		<Spin fix v-show="addLoading"></Spin>
	</div>
</template>
<script>
	import moment from "moment";
	export default {
		name: "Add",
		props: {
			allDBList: Array,
			choosed: Object
		},
		data() {
			return {
				batchList: [],
				addLoading: false,
				dbTestFlag: false,
				formData: {
					dbSysname: "",
					dbIp: "",
					dbType: "oracle",
					dbName: "",
					dbPort: "",
					dbSchema: "",
					username: "",
					password: ""
				},
				ruleInline: {
					dbSysname: [{
						required: true,
						message: "系统不能为空",
						trigger: "blur"
					}],
					dbIp: [{
						required: true,
						message: "地址不能为空",
						trigger: "blur"
					}],
					dbName: [{
						required: true,
						message: "库名不能为空",
						trigger: "blur"
					}],
					dbPort: [{
						required: true,
						message: "端口不能为空",
						trigger: "blur"
					}],
					username: [{
						required: true,
						message: "用户不能为空",
						trigger: "blur"
					}],
					password: [{
						required: true,
						message: "密码不能为空",
						trigger: "blur"
					}]
				},
				selectArr: []
			};
		},
		methods: {
			//提交表单加校验表单
			handleSubmit(name) {
				this.$refs[name].validate(async valid => {
					if (valid) {
						console.log(this.formData.dbType);
						if(this.formData.dbType == null  ){
							this.$Message.error("mysql,oracle不能为空");
						}else{
							this.addLoading = true;
							const result = await this.$api.saveUpdateEtlBusinessDbInfo(this.formData);
							this.addLoading = false;
							if (result.code === 1) {
								this.$Message.success("保存成功!");
								this.$emit("fun");
							} else {
								this.$Message.error(result.errMsg);
							}
						}

					}
				});
			},
			//测试数据库连接
			async testDBConnect(name) {
				this.$refs[name].validate(async valid => {
					if (valid) {

						if(this.formData.dbType == null  ){
							this.$Message.error("mysql,oracle不能为空");
						}else{
											this.addLoading = true;
							const result = await this.$api.testDBConnect(this.formData);
							this.addLoading = false;
							if (result.code === 1) {
								this.$Message.success("连接成功!");
								this.dbTestFlag = true;
							} else {
								this.$Message.error(result.errMsg);
								this.dbTestFlag = false;
							}
						}


					}
				});
			},
			//查询批次列表
			async getBatchList() {
				const data = {
					pages: 1,
					sizes: 9999
				};
				const result = await this.$api.getEtlBatchList(data);
				if (result.code === 1) {
					let batchList = result.data.list;
					let newArr = new Array();

					if (Object.keys(this.choosed).length > 0) {
						newArr = batchList.filter(item => item.name === this.choosed.name);
						this.formData = this.choosed;
						console.log(this.formData);
					} else {
						batchList.forEach(item => {
							let flag = false;
							for (let i = 0; i < this.allDBList.length; i++) {
								let dbItem = this.allDBList[i];
								if (item.name === dbItem.name) {
									flag = true;
									break;
								}
							}
							if (!flag) {
								newArr.push(item)
							}
						});
					}
					this.selectArr = newArr;
				}
			}
		},
		mounted() {
			this.getBatchList();
		}
	};
</script>
